<template>
  <div class="goods_swiper">
    <van-swipe>
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" @click="getImg(images,index)">
      </van-swipe-item>
    </van-swipe>

    <div class="goods_info">
      <div class="goods_price">
        <span>￥</span>
        {{info.price}}
      </div>
      <div class="goods_yuan">市场价格￥{{info.yuan}}</div>
      <div class="goods_title">{{info.name}}</div>
      <div class="num">月销量:{{info.num1}}</div>
      <a class="tips" v-if="show1" @click="show1=false">降价通知</a>
      <a class="tips" v-if="!show1" @click="show1=true">已订阅降价通知</a>
    </div>

    <div class="totop" v-show="istop" @click="toTop">
      <img src="../../assets/top2.png" alt>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
  data() {
    return {
      show1: true,
      istop: false,
      images: [
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1963467009,2912936164&fm=26&gp=0.jpg",
        "http://5b0988e595225.cdn.sohucs.com/images/20180809/6f7010d833ef4e57b084784131c234cb.jpeg"
      ],
      info: {
        price: "100",
        name: "这个电脑好啊哎哎哎哎哎",
        yuan: "80",
        num1: "13"
      }
    };
  },
  methods: {
    scrollToTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 20) {
        this.istop = true;
      } else {
        this.istop = false;
      }
    },
    toTop() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      document.documentElement.scrollTop = 0;
    },
    getImg(images, index) {
      ImagePreview({
        images: images,
        showIndex: true,
        loop: false,
        startPosition: index
      });
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  }
};
</script>

<style scope>
.goods_swiper .totop {
  position: fixed;
  bottom: 70px;
  z-index: 999;
  right: 30px;
}
.goods_swiper .totop img {
  height: 40px;
  width: 40px;
}
.goods_swiper .van-swipe img {
  width: 100%;
  min-height: 375px;
}
.goods_swiper .goods_info {
  position: relative;
  background: white;
  padding: 10px 10px;
  margin-top: -4px;
}
.goods_swiper .goods_info .goods_title {
  font-weight: 600;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.goods_swiper .goods_info div {
  padding-top: 5px;
}
.goods_swiper .goods_info .goods_price span {
  font-size: 17px;
}
.goods_swiper .goods_info .goods_price {
  color: #e73f09;
  font-size: 23px;
  font-weight: 600;
}
.goods_swiper .goods_info .goods_yuan {
  color: #b3b3b3;
  font-size: 16px;
  text-decoration: line-through;
}
.goods_info .tips {
  position: absolute;
  top: 50px;
  right: 3%;
  border: 1px solid #e73f09;
  border-radius: 4px;
  font-size: 12px;
  line-height: 24px;
  padding: 0 8px;
  color: #e73f09;
}
</style>
